<template>
  <div style="padding-top: 10px;padding-bottom: 10px">
    <van-card
        style="width: 280px;margin:10px 10px;border-style: solid;border-width:1px;border-radius: 15px;text-align: left"
        v-for="team in props.teamList"
        :thumb="team.createUser?.avatarUrl"
        :title="team.name"
        :desc="team.description"
        :tag="teamStatusEnum[team.status]"
    >

      <template #tags>
        <van-tag plain type="success">{{ '队长' + team.createUser.username }}</van-tag>
      </template>
      <template #bottom>
        <div>
          <van-progress :percentage="Math.floor((team.userVOS.length + 1)/team.maxNum *100)" style="margin: 5px 0"/>
          {{ ' 队伍人数' + (team.userVOS.length + 1) + '/' + team.maxNum }}
        </div>
        <div>
          {{ '过期时间' + moment(team.expireTime).format('YYYY-MM-DD') }}
        </div>
        <p>队员</p>
        <div v-for="user in team.userVOS" class="image-container">
          <van-image
              round
              width="2rem"
              height="2rem"
              :src="user.avatarUrl"
          />

        </div>
      </template>
      <template #footer>
        <van-button v-if="team.userId === currentUser?.id" size="mini" type="primary"
                    @click="updateTeam(team.id)">
          更新队伍
        </van-button>
        <van-button v-if="!team.hasJoin && team.userId !== currentUser?.id "
                    size="mini"
                    type="primary"
                    @click="()=>{
                      joinTeamId = team.id
                      if(team.status === 0){
                        doJoinTeam(team.id)
                      }else {
                        showPasswordDialog = true
                      }
                    }">加入队伍
        </van-button>
        <van-button size="mini"
                    type="primary"
                    v-if="team.hasJoin && team.userId !== currentUser?.id "
                    @click="doQuitTeam(team.id)">退出队伍
        </van-button>
        <van-button size="mini"
                    type="danger"
                    v-if="team.userId === currentUser?.id"
                    @click="doDissolveTeam(team.id)">解散队伍
        </van-button>

      </template>

    </van-card>
    <van-dialog v-model:show="showPasswordDialog" title="输入密码" show-cancel-button
                @confirm="doJoinTeam(password)" @cancel="doCancel">
      <van-field v-model="password" placeholder="请输入密码"/>
    </van-dialog>
  </div>


</template>
<script setup lang="ts">
import teamStatusEnum from "../constant/team.ts";

import myAxios from "../plugins/myAxios.ts";
import {showToast} from 'vant'
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../services/user.ts";
import {useRouter} from "vue-router";

interface teamTypeListProps {
  teamList: TeamType[]
}

const currentUser = ref()
const showPasswordDialog = ref(false)
const password = ref()
const joinTeamId = ref()
onMounted(async () => {
  currentUser.value = await getCurrentUser();

})

const props = withDefaults(defineProps<teamTypeListProps>(), {
  teamList: [] as TeamType[]
})

const doJoinTeam = async () => {
  const res = await myAxios.post('/team/join', {
    teamId: joinTeamId.value,
    password: password.value
  })
  console.log()
  if (res?.code == 0) {
    showToast({
      message: "加入成功",
      position: "top",
    })
    doCancel()
  } else {
    showToast({
      message: "加入失败",
      position: "top",
    })
  }
}
const router = useRouter();
//跳转更新队伍
const updateTeam = (id: number) => {
  router.push(
      {
        path: '/team/update',
        query: {
          id: id
        }
      }
  )
}

const doQuitTeam = async (id: number) => {
  const res = await myAxios.post('/team/quit', {
    teamId: id
  })
  if (res?.code === 0) {
    showToast("操作成功")
  } else {
    showToast('操作失败')
  }
}
const doDissolveTeam = async (id: number) => {
  const res = await myAxios.post('/team/dissolve', {
    teamId: id
  })
  if (res?.code === 0) {
    showToast("操作成功")
  } else {
    showToast('操作失败')
  }
}
const doCancel = () => {
  joinTeamId.value = 0
  password.value = ''
}
</script>

<style scoped>
.image-container {
  float: left;
}
</style>